<template>
	<div id="network-anchor" style="width: 100%; height: 50%;"></div>
	<button class="arrow left-arrow" @click="lastImage">&#9665;</button>
	<button class="arrow right-arrow" @click="nextImage">&#9655;</button>

	<div>
		<el-table :data="formattedTableData" style="width: 100%; margin-top: 5%">
			<!-- 行标题 -->
			<el-table-column width="100">
			<template #header>
				<div></div>
			</template>
			<template #default="scope">
				<div>{{ scope.row.label }}</div>
			</template>
			</el-table-column>
			<!-- 虚拟结点列 -->
			<el-table-column label="虚拟锚点网元">
			<template #default="scope">
				<div>{{ scope.row.virtualNode }}</div>
			</template>
			</el-table-column>
			<!-- 实际结点列 -->
			<el-table-column label="实际接入网元">
			<template #default="scope">
				<div :class="{'highlight': scope.row.actualNode}">{{ scope.row.actualNode }}</div>
			</template>
			</el-table-column>
		</el-table>
	</div>

	
</template>

<script>
import * as echarts from 'echarts';
	export default {
		data(){
			return{
				tableData: [],
				ipList: {},
				originalData: [], // 用于存储原始数据的副本
				formattedTableData: [],
				myChart: null,
				titleSum : 3,
				titleIndex: 0,
				option: {
					tooltip: {},
					series: [
						{
							type: 'graph',
							layout: 'none',
							data: [
								{ name: '星载基站', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40 },
								{ name: '锚点1', x: 80, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40, label: { show: false } },
								{ name: '锚点2', x: 120, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40, label: { show: false } },
								{ name: '转发', x: 50, y: -10, symbolSize: [40, 30], itemStyle: { color: "#116dff" }, label: { position: '' } },
								{ name: '锚点', x: 50, y: 10, symbolSize: [40, 30], itemStyle: { color: "#116dff" }, label: { position: '' } },
								{ name: '普通用户\n面网元', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40 },
								{ name: '会话管理功能', x: 100, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: 40, label: { position: "right" } },
								{ name: '矩形左', x: 63, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
								{ name: '矩形右', x: 140, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
								{ name: '矩形下', x: 100, y: 23, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
							],
							links: [
								{ source: '星载基站', target: '矩形左', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
								{ source: '矩形右', target: '普通用户\n面网元', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
								{ source: '会话管理功能', target: '矩形下', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } }
							
							],
							label: {
							show: true,
							position: 'bottom',
							formatter: '{b}',
							color: 'white'
							},
							lineStyle: {
							curveness: 0,
							width: 2,
							color: 'white',
							opacity: 1
							}
						}
					],
					graphic: [
						{
							type: 'rect',
							shape: {
								x: 180,
								y: 10,
								width: 150,
								height: 80
							},
							style: {
								fill: 'none',
								stroke: 'white',
								lineWidth: 2,
								lineDash: [5, 5]
							},
							z: 1
						},
						{
							type: 'text',
							left: 210,
							top: 75,
							style: {
								text: '锚点用户面网元',
								fill: 'white',
							},
							z: 2
						},
					]
				}

			}
		},
		methods:{
			initChart() {
				const chartDom = document.getElementById('network-anchor');
				this.myChart = echarts.init(chartDom);
				this.myChart.setOption(this.option);
			},
			lastImage() {
				this.titleIndex = (this.titleIndex - 1 + this.titleSum) % this.titleSum;
				this.draw();
			},
			nextImage() {
				this.titleIndex = (this.titleIndex + 1 + this.titleSum) % this.titleSum;
				this.draw();
			},
			draw() {
				if (this.titleIndex == 0) {
					this.actionA();
				} else if (this.titleIndex == 1) {
					this.actionB();
				} else if (this.titleIndex == 2) {
					this.actionC();
				}
			},
			getData(){
				let that=this
				that.$axios.get("http://10.112.38.20:39898/vm_table").then(function(res) {
					that.tableData=res.data;
					that.formatTableData();
					// console.log(that.formattedTableData)
					// this.tableData = res.data;
				})
			},
			formatTableData() {
				if (this.tableData.length > 0) {
					const data = this.tableData[0];
					this.formattedTableData = [
					{
						label: "名称",
						virtualNode: data["va-name"],
						actualNode: data["sa-name"]
					},
					{
						label: "标识",
						virtualNode: data["va-id"],
						actualNode: data["sa-id"]
					}
					];
				}
			},
			actionA() {
				this.updateChart([
					{ source: '星载基站', target: '矩形左', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
					{ source: '矩形右', target: '普通用户\n面网元', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
					{ source: '会话管理功能', target: '矩形下', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } }
				]);
				this.updateData([
					{ name: '星载基站', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40 },
					{ name: '锚点1', x: 80, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40, label: { show: false } },
					{ name: '锚点2', x: 120, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40, label: { show: false } },
					{ name: '转发', x: 50, y: -10, symbolSize: [40, 30], itemStyle: { color: "#116dff" }, label: { position: '' } },
					{ name: '锚点', x: 50, y: 10, symbolSize: [40, 30], itemStyle: { color: "#116dff" }, label: { position: '' } },
					{ name: '普通用户\n面网元', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40 },
					{ name: '会话管理功能', x: 100, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: 40, label: { position: "right" } },
					{ name: '矩形左', x: 63, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
					{ name: '矩形右', x: 140, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
					{ name: '矩形下', x: 100, y: 23, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
				]);
			},
			actionB() {
				this.updateChart([
					{ source: '星载基站', target: '矩形左', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
					{ source: '矩形右', target: '普通用户\n面网元', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
					{ source: '会话管理功能', target: '锚点1', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
					{ source: '星载基站', target: '锚点', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' }, lineStyle: { type: "dashed" } },
				]);
				this.updateData([
					{ name: '星载基站', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40 },
					{ name: '锚点1', x: 80, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40, label: { show: false } },
					{ name: '锚点2', x: 120, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40, label: { show: false } },
					{ name: '转发', x: 50, y: -10, symbolSize: [40, 30], itemStyle: { color: "#116dff" }, label: { position: '' } },
					{ name: '锚点', x: 80, y: 50, symbolSize: [40, 30], itemStyle: { color: "#116dff" }, label: { position: '' } },
					{ name: '普通用户\n面网元', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40 },
					{ name: '会话管理功能', x: 100, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: 40, label: { position: "right" } },
					{ name: '矩形左', x: 63, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
					{ name: '矩形右', x: 140, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
					{ name: '矩形下', x: 100, y: 23, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
				]);
			},
			actionC() {
				this.updateChart([
					{ source: '星载基站', target: '矩形左', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
					{ source: '矩形右', target: '普通用户\n面网元', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
					{ source: '会话管理功能', target: '锚点2', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' } },
					{ source: '星载基站', target: '锚点', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' }, lineStyle: { type: "dashed" } },
				]);
				this.updateData([
					{ name: '星载基站', x: 0, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40 },
					{ name: '锚点1', x: 80, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40, label: { show: false } },
					{ name: '锚点2', x: 120, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40, label: { show: false } },
					{ name: '转发', x: 50, y: -10, symbolSize: [40, 30], itemStyle: { color: "#116dff" }, label: { position: '' } },
					{ name: '锚点', x: 80, y: 50, symbolSize: [40, 30], itemStyle: { color: "#116dff" }, label: { position: '' } },
					{ name: '普通用户\n面网元', x: 200, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 40 },
					{ name: '会话管理功能', x: 100, y: 50, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: 40, label: { position: "right" } },
					{ name: '矩形左', x: 63, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
					{ name: '矩形右', x: 140, y: 0, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
					{ name: '矩形下', x: 100, y: 23, symbol: 'image://' + require('@/assets/icon/wx.png'), symbolSize: 0, label: { show: false } },
				])
			},
			updateChart(links) {
				this.option.series[0].links = links;
				this.myChart.setOption(this.option, { notMerge: true, replaceMerge: ['series'] });
			},
			updateData(data) {
				this.option.series[0].data = data;
				this.myChart.setOption(this.option);
			},
			switper(){
				let that=this
				that.getData()
				var timerID=setInterval(()=>that.getData(), 3000)
			},
		},
		mounted() {
			this.initChart();
			this.switper();
		},
	}
</script>

<style lang="scss" scoped>
	@import "./table.scss";
	.textstyle{
		white-space: pre-wrap;
		font-size: 20px;
		line-height: 150%;
	}
	.container {
		height: 100%;
		display: flex;
		position: relative;
	}

	.arrow {
		position: absolute;
		top: 35%;
		transform: translateY(-50%);
		background: transparent;
		border: none;
		font-size: 40px;
		cursor: pointer;
		outline: none;
	}
  
	.left-arrow {
		left: 10px;
		color:cyan;
	}

	.right-arrow {
		right: 10px;
		color: cyan;
	}

	.highlight {
		font-weight: bold;
		color: red;
	}
	
</style>
